<template>
	<!-- 普通的圆环 -->
	<view class="RingShow">
		<view class="RingShow_mid" :style="ringStyle" :class="tagClass">
		</view>
		<view class="RingShow_text" >
			<view class="RingShow_text_title" @click="clickRing()">
				{{props.title}}
			</view>
			<ClickShowTextVue :text="isShowTag?percentage+'%':String(Math.abs(props.have))" :takeStyle="{width:'80%'}">
				<view class="RingShow_text_about oneLine">
					{{isShowTag?percentage+"%":Math.abs(props.have)}}
				</view>
			</ClickShowTextVue>
		</view>
	</view>
</template>

<script setup>
	import ClickShowTextVue from "@/components/base/ClickShowText.vue";
	import store from '@/store/index.js';
	import {
		ref,
		defineProps,
		computed
	} from 'vue'
	const props = defineProps({
		canClick: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ""
		},
		all: {
			type: Number,
			default: 0,
			validator: function(value) {
				return !isNaN(parseFloat(value)) && isFinite(value);
			}
		},
		have: {
			type: Number,
			default: 0,
			validator: function(value) {
				return !isNaN(parseFloat(value)) && isFinite(value);
			}
		},
	})
	const percentage = computed(() => {
		if (props.have === 0) {
			return 0.0;
		}
		let percentage = (props.have / props.all) * 100;
		percentage = percentage.toFixed(1); 
		return percentage;
	})
	const ringStyle = computed(() =>
		`--percentage:${Math.abs(percentage.value)}%;--rotateY:${percentage.value>0?'0deg':'180deg'}`
	)
	const tagClass = computed(() => percentage.value < 0 ? 'incomeColor_' +
		store.state.setting.typeTag : 'expensesColor_' + store.state.setting.typeTag) // 收入支出 颜色样式
	const isShowTag = ref(true) // true 显示 百分比  false 显示数值
	const clickRing = () => {
		if (props.canClick) isShowTag.value = !isShowTag.value
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.RingShow {
		height: 100%;
		aspect-ratio: 1;
		border-radius: 50%;
		background: radial-gradient(circle at center, transparent calc(60% - 3rpx), $baseBlack_main 60%);
		position: relative;

		.RingShow_mid {
			--themeColor: #66f;
			--percentage: 0%;
			--rotateY: 0deg;
			transform: rotateY(var(--rotateY));
			background: conic-gradient(at 50% 50%, var(--themeColor) var(--percentage), transparent calc(var(--percentage)));
			mask: radial-gradient(circle at center, transparent calc(60% - 3rpx), #fff 60%);
			border-radius: 50%;
			aspect-ratio: 1;
		}

		.RingShow_text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;

			&_title {
				line-height: 0.8em;
				font-size: $smallFontsize;
				color: $baseBlack_big;
			}

			&_about {
				width: 100%;
				font-size: $midFontsize;
				text-align: center;
			}
		}
	}
</style>